<template>
  <view class="container">
    <view class="tips">
      <image class="img" src="@/static/images/alert_icon.png" mode="widthFix"></image>
      <view>下拉所选费项为通用费用中手动添加的费用名称</view>
    </view>
    <div class="fee-name">{{ pageCon }}</div>
    <div class="fee-pane-content">
      <ve-form class="fee-pane-item" :model="feeForm" ref="feeFormRef" :rules="rules" layout="vertical">
        <ve-card v-for="(item, index) in feeForm" :key="index">
          <div class="order-fee-item">
            <div class="order-fee-item-content">
              <ve-form-item label="费项名称" :borderBottom="true">
                <view @click="openSelectModal(pageType, index)">
                  <text v-if="item.itemName">{{ item.itemName }}</text>
                  <text v-else style="color: #9ea5bb">请选择</text>
                </view>
                <ve-icon class="label-icon" name="icon-more" height="23" width="13" />
              </ve-form-item>
              <ve-button class="delete-button" type="plain" status="danger" v-if="feeForm.length > 1" @click="delFeeFn(index)">
                <template #icon>
                  <ve-icon name="delete" width="36" height="36" />
                </template>
                删除此费项
              </ve-button>
            </div>
          </div>
        </ve-card>
      </ve-form>
      <ve-button type="plain" @click="addFeeFn" :customStyle="{ backgroundColor: '#F3F7FF' }" v-if="feeForm.length < 20">
        <template #icon>
          <ve-icon name="plus" width="36" height="36" />
        </template>
        添加新费项
      </ve-button>
    </div>
    <!-- 底部 footer -->
    <ve-bottom-box size="mini">
      <ve-button type="primary" size="long" :loading="okLoading" @click="submitFn">确定</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { tenantCostConfig, tenantCostConfigSave } from '@/api/home/revenue'

  // 费用
  const feeFormRef = ref()
  const pageTlt = ref('')
  const pageCon = ref('')
  const pageType = ref('')
  const feeForm = ref([
    {
      itemName: '',
    },
  ])

  onLoad((options) => {
    console.log(options, 'options')
    pageType.value = options.type
    if (options.type == '1') {
      pageTlt.value = '保险费配置'
      pageCon.value = '不计免赔还包含'
    } else if (options.type == '2') {
      pageTlt.value = '车损费配置'
      pageCon.value = '车损费还包含：'
    } else if (options.type == '3') {
      pageTlt.value = '油电费配置'
      pageCon.value = '油电费还包含：'
    }
    uni.setNavigationBarTitle({ title: pageTlt.value })
    getDetail()
  })

  const getDetail = () => {
    tenantCostConfig({ type: pageType.value }).then((res) => {
      if (res.code == 200) {
        if (res.result.length) {
          feeForm.value = res.result
        } else {
          feeForm.value = [
            {
              itemName: '',
            },
          ]
        }
      }
    })
  }

  // 添加费用
  const addFeeFn = () => {
    feeForm.value.push({
      itemName: '',
    })
  }
  // 删除费用
  const delFeeFn = (index) => {
    feeForm.value.splice(index, 1)
  }

  const openSelectModal = (type, index) => {
    uni.navigateTo({
      url:
        '/pages/revenue-summary/components/select-fee?type=' +
        type +
        '&index=' +
        index +
        '&list=' +
        encodeURIComponent(JSON.stringify(feeForm.value.map((item) => item.itemName))),
      events: {
        selectorConfirm: (name, index) => {
          console.log(name, index)
          feeForm.value[index].itemName = name
        },
      },
    })
  }

  // 提交
  const okLoading = ref(false)
  const submitFn = () => {
    const params = feeForm.value.map((item) => ({ itemName: item.itemName })).filter((item) => item.itemName?.trim() !== '')
    tenantCostConfigSave({ type: pageType.value, list: params }).then((res) => {
      if (res.code == 200) {
        uni.$emit('updateRevenueSummary')
        uni.navigateBack()
      }
    })
  }
</script>
<style lang="less" scoped>
  .container {
    flex-direction: column;
    .fee-name {
      padding: 24rpx 24rpx 0 24rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #191c27;
      line-height: 32rpx;
    }
    .fee-pane-content {
      flex: 1;
      overflow: auto;
      padding-bottom: 274rpx;
      padding: 24rpx;
    }
  }
  .delete-button {
    margin-top: 24rpx;
    margin-bottom: 32rpx;
  }
  .label-icon {
    flex-shrink: 0;
    margin-left: 16rpx;
  }
  .tips {
    display: flex;
    width: 100%;
    background: #e8f3ff;
    font-weight: 400;
    font-size: 24rpx;
    color: #1e1e1e;
    padding: 24rpx 14rpx 24rpx 24rpx;
    .img {
      margin-left: 6rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
</style>
